<template>
    <div class="info-collect-wrapper">
      <new-info-collection :fromType="1" :resourceId="resourceId" :resType="Number(resourceType)" scene="buy_page"
        entryHeight="0.96rem" :directShowInfo="showPopup" :isNeedLoadData="isNeedLoadData" :infoCollectData="dataCache" :isAlive="true" :isIframe="isAliveIframe"
        @directShowEven="closePopup" @getToastTitle="setToastTitle" @getAnswerIds="getAnswerIds"
        @onInfoCollectionLoaded="onInfoCollectionLoaded" @onSaveInfoCollection="onSaveInfoCollection" />
      <van-divider v-if="needCollectBeforePay" :style="{ padding: '0 0.33rem', margin: '0' }" />
    </div>
  </template>

  <script>
  import { Divider } from "vant";
  import { getData, setData } from "../../utils/data-storage";
  import { isAliveIframe } from "../../utils/checkEnv";
  import EventBus from '../../utils/eventbus'
  // import {newInfoCollection} from '@xiaoe/xiaoe-common-info-collect'
  import Mimir from "@xiaoe/mimir";

  export default {
    components: {
      newInfoCollection: ()=>Mimir({section:'xiaoe_common_info_collect',project:'live_h5'}).get('new-info-collection'),
      // newInfoCollection,
      VanDivider: Divider,
    },
    props: {
      resourceId: [String, Number],
      resourceType: [String, Number],
    },
    data() {
      return {
        infoCollectTitle: "购买信息",
        needCollectBeforePay: false,
        showPopup: false,
        validateResolve: null,
        validateReject: null,
        dataCache: null,
        infoCollectionInfo: null,
        isAliveIframe
      };
    },
    computed: {
      isNeedLoadData() {
        // 已有缓存数据时，不需要再次请求接口数据
        for (let key in this.dataCache) {
          return false;
        }
        return true;
      },
      cacheKey() {
        return [this.resourceId, this.resourceType].join("_");
      }
    },
    created() {
      this.dataCache = getData(this.cacheKey);
      this.$skynet.report({
        details: {
          keyword : 'confirmOrderPage_collect_init',
          msg: '确认订单页面参数传入信息采集组件监控日志',
          params: {
            resource_id: this.resourceId,
            resource_type: this.resourceType,
          }
        },
        level: 'INFO',
        type: 'CUSTOM'
      });
    },
    methods: {
      show() {
        //是否需要采集
        if (!this.needCollectBeforePay) {
          return Promise.resolve(false);
        }
        //是否采集过
        if (this.infoCollectionInfo) {
          return Promise.resolve(this.infoCollectionInfo);
        }

        this.showPopup = true;
        return new Promise((resolve, reject) => {
          this.validateResolve = resolve;
          this.validateReject = reject;
        })
      },
      handleInfoCollectionData(ids, id) {
        const idsArr = ids ? Object.values(ids) : [];

        if (idsArr.length > 0 || id) {
          this.infoCollectionInfo = {
            information_source_id: id?.toString(),
            info_collect_id: idsArr.join("_")
          }
          if (this.validateResolve) {
            this.validateResolve(this.infoCollectionInfo);
            this.showPopup = false;
          }
        }

        this.$skynet.report({
          details: {
            keyword: 'confirmOrderPage_collect_info',
            msg: '信息采集组件抛出的参数给确认订单页页面',
            params: {
              ids,
              id
            }
          },
          level: 'INFO',
          type: 'CUSTOM'
        });
      },
      /**
       * @description: 信息采集提交成功后的回调函数
       * @param {Object} ids 信息提交后台返回的特定ids，需要保存到localStorage，下单时同时传递
       * @param {Object} id 信息提交后台返回的特定id，下单时同时传递，信息采集与订单绑定
       */
      onSaveInfoCollection(ids, infoCollectData, id) {
        this.handleInfoCollectionData(ids, id);

        setData(this.cacheKey, infoCollectData);
        this.$emit('change', this.infoCollectionInfo);
      },
      /**
       * @description: 信息采集组件接口请求后的回调函数
       * @param {boolean} isLoad 信息采集数据是否加载完毕
       * @param {boolean} needCollect 是否需要进行信息采集
       */
      onInfoCollectionLoaded(isLoad, needCollect) {
        this.needCollectBeforePay = needCollect;
        EventBus.$emit("order_onInfoCollectionLoaded",{
          needCollect,
          isLoad
        })
      },
      /**
       * @description: 获取信息采集的标题
       * @param {string} title 信息采集标题
       */
      setToastTitle(title) {
        this.infoCollectTitle = title;
      },
      closePopup() {
        this.showPopup = false;
      },
      getAnswerIds(answerIds, sourceId) {
        if (this.isNeedLoadData) {
          this.onSaveInfoCollection(answerIds, null, sourceId);
        } else {
          this.handleInfoCollectionData(answerIds, sourceId)
        }
      }
    },
  };
  </script>
<style>
.info-popup-box {
  z-index: 3001 !important;
}
.search-popup-overlay {
  z-index: 3002 !important;
}
.information-search {
  z-index: 3003 !important;
}
</style>
  <style lang="scss" scoped>
  .info-collect-wrapper {
    background-color: #fff;

    .info-collection-box {
      width: 100%;
      max-height: 0.96rem;
      background-color: #fff;

      ::v-deep .apply-box {
        padding: 0 0.32rem;
      }

      ::v-deep .van-popup {
        max-width: 480px;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 auto;
      }
    }
  }
  </style>
